<!DOCTYPE html> 
<html> 
  <head> 
  	<title>Visualization by Vizzuality</title> 
    <link rel="shortcut icon" href="./images/favicon.ico"/> 
 
  	<meta name="csrf-param" content="authenticity_token"/> 
  	<meta name="csrf-token" content="hGbr5JdHXI+vqL5u7n/Mft4y1Ie9m+Qes2pfD062wWs="/> 
  	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
  	<link href="/stylesheets/visualization.css" media="screen" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="/javascripts/js_config.js"></script>
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
 		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="/javascripts/visualization/highcharts.js" type="text/javascript" charset="utf-8"></script> 
    <script src="/javascripts/visualization/jquery-ui-1.8.5.custom.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="/javascripts/visualization/visualization.js" type="text/javascript" charset="utf-8"></script> 
  	<script type="text/javascript"> 
 
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-18595465-1']);
      _gaq.push(['_trackPageview']);
 
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
 
    </script> 
  </head> 
 
  <body>
    <div id="map">
    </div>
    <div class="content">
      <div class="header"></div>
      <h1 class="title"></h1>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="stats">
          <div id="main_chart">
          </div>
        </div>
        <div class="move_box">
          <img src="./images/resize_button.png"/>
        </div>
        <div class="main_bottom">
          <div class="main_center">
            <div class="info">
              <div class="left">
                <div class="list">
                  <h3>OBSERVATIONS FEED</h3>
                  <ul>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/purple.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/purple.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="unknown" src="../images/visualization/unknown.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="unknown" src="../images/visualization/unknown.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/purple.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/black.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/orange.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/blue.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li>
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/fuchsia.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                    <li class="last">
                      <div class="image">
                        <img src="../images/visualization/example.jpg" alt="bird" title="bird" />
                        <img class="kind" src="../images/visualization/green.png" />
                      </div>
                      <div class="data">
                        <h2>Eurasian Eagle Owl</h2>
                        <p>Photo by <a href="#">Al Roggers.</a> Recognized by <a href="#">Al Roggers.</a></p>
                        <span><a class="map"></a><a class="recognize"></a></span>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="final">
                  <a href="#">view more</a>
                </div>
              </div>
              <div class="right">
                <h3>OBSERVATIONS BY KINGDOM</h3>
                <div class="block" id="stats">
                </div>
                <h3 class="top">MOST ACTIVE USERS</h3>
                <ul>
                  <li>
                    <div class="image">
                      <img src="../images/visualization/gravatar.png" alt="User" />
                    </div>
                    <div class="data">
                      <h4>John Smith</h4>
                      <p><strong>67</strong> Observations</p>
                      <p><strong>123</strong> Recognitions</p>
                    </div>
                  </li>
                  <li>
                    <div class="image">
                      <img src="../images/visualization/gravatar.png" alt="User" />
                    </div>
                    <div class="data">
                      <h4>John Smith</h4>
                      <p><strong>67</strong> Observations</p>
                      <p><strong>123</strong> Recognitions</p>
                    </div>
                  </li>
                  <li>
                    <div class="image">
                      <img src="../images/visualization/gravatar.png" alt="User" />
                    </div>
                    <div class="data">
                      <h4>John Smith</h4>
                      <p><strong>67</strong> Observations</p>
                      <p><strong>123</strong> Recognitions</p>
                    </div>
                  </li>
                  <li>
                    <div class="image">
                      <img src="../images/visualization/gravatar.png" alt="User" />
                    </div>
                    <div class="data">
                      <h4>John Smith</h4>
                      <p><strong>67</strong> Observations</p>
                      <p><strong>123</strong> Recognitions</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
     
  </body> 
</html>